<template>
    <div>
        <div class="opt-area-02">
            <div class="right-con">
                <div class="input-frame">
                    <Input type="text" placeholder="请输入企业名称" clearable v-model="params.enterpriseName" icon="ios-search" />
                </div>
                <Button type="primary" @click="searchList">搜索</Button>
            </div>
        </div>
        <div>
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    highlight-hover-row
                    export-config
                    max-height="500"
                    size="medium"
                    :loading="countData.loading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="ReDataList"
                    @checkbox-change="selectList"
                    @checkbox-all="selectList">
                <vxe-table-column type="seq" title="序号"  width="60" fixed="left"></vxe-table-column>
                <vxe-table-column field="enterpriseName" title="企业名称"></vxe-table-column>
                <vxe-table-column field="number" title="接收人数"></vxe-table-column>
            </vxe-table>
        </div>
        <Row type="flex" justify="end" class="page-style">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[20,30,50,100]" @on-page-size-change="pageSizeChange"/>
        </Row>
    </div>
</template>

<script>
import { getEterpriseNameList } from '@/api/record'
export default {
  data () {
    return {
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      params: {},
      countData: {
        loading: false
      },
      ReDataList: []
    }
  },
  methods: {
    init () {
      this.countData.loading = true
      let param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        enterpriseName: this.params.enterpriseName
      }
      getEterpriseNameList(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.ReDataList = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.countData.loading = false
        } else {
          this.countData.loading = false
          this.error(data)
        }
      })
    },
    searchList () {
      this.init()
    },

    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageObj.pageSize = pageSize
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .opt-area-02 .right-con {
        width: 100%;
        display: flex;
    }
    .input-frame {
        margin-right: 10px;
    }
    .page-style{
        margin-top: 15px;
    }
    .btn-style{
        margin-left: 10px;
    }
</style>
